<template>
  <div class="popover" :style="style" v-if="isShowPopover">
    <div v-for="(item, index) in popoverList" :key="index" class="popover-item" @click="menuClick(item.val)">
      <i :class="'el-icon-' + item.type"></i>
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShowPopover: { // 是否展示右键内容
      type: Boolean
    },
    popoverLeft: { // 距离左边的距离
      type: Number
    },
    popoverTop: { // 距离顶部的距离
      type: Number
    },
    popoverList: {
      type: Array
    },
    curItem: {
      type: Object
    },
    curIndex: {
      type: Number
    }
  },
  computed: {
    // 计算出距离
    style () {
      return {
        left: this.popoverLeft + 'px',
        top: this.popoverTop + 'px'
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // 关闭菜单
    closeMenu () {
      this.$emit('update:isShowPopover', false)
    },
    // 菜单某一项被点击
    menuClick (val) {
      this.$emit(val)
    }
  },
  watch: {
    // 目的: 为了在鼠标右键内容展示,点击其他地方隐藏鼠标右键内容
    isShowPopover (val) {
      if (val) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.popover {
  width: 100px;
  height: auto;
  position: fixed;
  background: #fff;
  border: 1px solid #ddd;
  color: #666666;
  box-shadow: 0 0 2px 0 #eee;
  .popover-item {
    padding: 0 10px;
    border-bottom: 1px solid #efefef;
    line-height: 35px;
    cursor: pointer;
    &:hover {
      background: #f5f5f5;
    }
  }
  .popover-item:last-child{
    border-bottom: none;
  }
}
</style>